import React, { useState } from "react";
import Editor from "./Editor";
import Note from "./Note";

const Notes = () => {
    const [notes, setNotes] = useState(
        [
            { body: 'hello~' },
            { body: '你好~' }
        ]
    )
    const destroyEntity = (entity) => {
        // console.log(entity)
        // 加_表示是私有属性
        const _entities = notes.filter(
            item => item.body !== entity.body
        )
        // console.log(_entities)
        setNotes(_entities)
    }
    const noteItems = notes.map(
        (note, index) =>
            <Note
                key={index}
                entity={note}
                destroyEntity={destroyEntity} />
    )
    const updateEntity = (event) => {
        console.log(event, '----------')
    }
    const createEntity = (() => {

    })
    return (
        <div className="ui container notes">
            <h4 className="ui horizontal divider header">
                <i className="paw icon" />
                Notes App _ React.js
            </h4>
            <button
                onClick={createEntity}
                className="ui right floated basic violet button">
                添加笔记
            </button>
            <div className="ui divided items">
                {noteItems}
            </div>
            <Editor updateEntity={updateEntity} />
        </div>
    )
}

export default Notes;